<template>
    <div>
        <div style="padding: 10px;">

            <!--            搜索区域-->
            <div style="margin:10px 0;">
                <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;" clearable/>
                <el-button type="primary" style="margin-left: 5px;" @click="find()"> 查询</el-button>
                <el-upload :action="'http://' + serverIp + ':9090/question/import'"
                           :show-file-list="false"
                           accept=".xlsx"
                           :on-error="handleExcelImportError"
                           :on-success="handleExcelImportSuccess" style="display: inline-block">
                    <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
                </el-upload>
                <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%;"
                    :row-style="{height:'80px'}"
                    class="tableClass"
                    stripe
            >
                <!--                <el-table-column type="selection" width="55"></el-table-column>-->
                <el-table-column prop="questionId" label="题号" width="100"></el-table-column>
                <el-table-column prop="questionType" label="题目类型">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.questionType === 1">单选题</el-tag>
                        <el-tag type="warning" v-if="scope.row.questionType === 2">多选题</el-tag>
                        <el-tag type="success" v-if="scope.row.questionType === 3">判断题</el-tag>
                        <el-tag type="warning" v-if="scope.row.questionType === 4">填空题</el-tag>
                        <el-tag type="info" v-if="scope.row.questionType === 5">问答题</el-tag>
                    </template>
                </el-table-column>
                <!--                <el-table-column prop="teacherId" label="出题老师ID" width="100"></el-table-column>-->
                <el-table-column prop="teacherName" label="出题老师" width="100"></el-table-column>
                <!--                <el-table-column prop="courseId" label="课程ID" width="100"></el-table-column>-->
                <el-table-column prop="courseName" label="课程名称" width="100"></el-table-column>
                <!--                <el-table-column prop="questionTitle" label="题干" width="100"></el-table-column>-->
                <el-table-column label="题干" width="300">
                    <template slot-scope="scope">
                        <p v-html='scope.row.questionTitle'></p>
                    </template>
                </el-table-column>
                <!--                <el-table-column prop="optionA" label="选项A" width="100"></el-table-column>-->
                <!--                <el-table-column prop="optionB" label="选项B" width="100"></el-table-column>-->
                <!--                <el-table-column prop="optionC" label="选项C" width="100"></el-table-column>-->
                <!--                <el-table-column prop="optionD" label="选项D" width="100"></el-table-column>-->
                <!--                <el-table-column prop="infoTextContentId" label="主要信息" width="100"></el-table-column>-->
                <!--                <el-table-column prop="parse" label="解析" width="100"></el-table-column>-->
                <el-table-column prop="correctAnswer" label="正确答案" width="150"></el-table-column>
                <el-table-column prop="score" label="分数" width="100"></el-table-column>
                <el-table-column prop="difficult" label="难度" width="100"></el-table-column>
                <!--                <el-table-column prop="createTime" label="创建时间" width="100"></el-table-column>-->
                <el-table-column prop="useStatus" label="使用状态" width="80">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.useStatus === '1'">启用</el-tag>
                        <el-tag type="warning" v-if="scope.row.useStatus === '0'">禁用</el-tag>
                    </template>
                </el-table-column>
                <!--操作-->
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                        ><i class="el-icon-edit-outline"></i> 编辑
                        </el-button>
                        <el-popconfirm
                                class="ml-5"
                                confirm-button-text='确定'
                                cancel-button-text='我再想想'
                                icon="el-icon-info"
                                icon-color="red"
                                title="您确定删除吗？"
                                @confirm="handleDelete(scope.$index,scope.row)"
                        >
                            <el-button type="danger" size="small" slot="reference"><i
                                    class="el-icon-remove-outline"></i> 删除
                            </el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
            <!--            分页栏-->
            <div style="margin: 10px 0;">
                <el-pagination
                        v-model:pageNum="pageNum"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>

        </div>
    </div>
</template>
<style>
    .tableClass .cell {
        padding: 0 !important;
        height: 40px;
        line-height: 30px !important;
        text-align: center;
    }
</style>
<script>

    import request from "../utils/request";
    import {serverIp} from "../../public/config";
    import bus from "../utils/bus"

    export default {
        name: 'Question',
        components: {},
        data() {
            return {
                form: {},
                roles: {},
                user: {},
                serverIp: serverIp,
                dialogVisible: false,
                search: '',
                pageSize: 5,
                pageNum: 1,
                total: 20,
                tableData: [],
                status: [{name: "启用", value: "1"}, {name: "禁用", value: "0"}],
                rules: {
                    questionId: [
                        {required: true, message: '请输入用戶ID', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getUser();
            this.load()
        },
        methods: {
            getUser() {
                this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
                if (!this.user) {
                    this.$message.info("获取用户失败，请重新登录")
                }
            },
            load() {
                var mess = this;
                // get方法需要params，post不要 "http://localhost:9090/question"
                if (this.user.role == "ROLE_TEACHER") {
                    var params = {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        questionTitle: this.search,
                        teacherId:this.user.userId
                    }
                }else{
                    var params = {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        questionTitle: this.search
                    }
                }
                request.get("/question", {
                    params:params
                }).then(res => {
                    console.log("res:", res);
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }).catch(err => {
                    this.$message.error(err)
                })
            },
            find() {
                this.pageNum = 1;
                this.load();
            },
            add() {
                this.dialogVisible = true;
                this.form = {};
                this.form.useStatus = "1"; //初始化使用状态
            },
            save() {
                console.log("form:", this.form)
                if (this.form.id) { // 更新
                    request.post('/question/save', this.form).then(res => {
                        console.log("code:", res.code)
                        if (res.code == '200') {
                            this.$message.success("保存成功")
                        } else {
                            this.$message.error("保存失败")
                        }
                        this.load() //刷新表格
                        this.dialogVisible = false
                        console.log("success")
                    })
                } else { //新增
                    request.post("/question/save", this.form).then(res => {
                        console.log(res.data)
                        if (res.code == '200') {
                            this.$message.success("添加成功")
                        } else {
                            this.$message.error("添加失败")
                        }
                        this.load() //刷新表格
                        this.dialogVisible = false
                        console.log("success")
                    })
                }

            },
            handleEdit(index, row) {
                this.form = JSON.parse(JSON.stringify(row))

                if (this.form.questionType == 1) {
                    bus.$emit('changeAsideActiveIndex', "radio")
                    this.$router.push({path: 'radio', name: '单选题创编', params: {form: this.form}})
                } else if (this.form.questionType == 2) {
                    bus.$emit('changeAsideActiveIndex', "checkbox")
                    this.$router.push({path: 'checkbox', name: '多选题创编', params: {form: this.form}})
                } else if (this.form.questionType == 3) {
                    bus.$emit('changeAsideActiveIndex', "judge")
                    this.$router.push({path: 'judge', name: '判断题创编', params: {form: this.form}})
                } else if (this.form.questionType == 4) {
                    bus.$emit('changeAsideActiveIndex', "fill")
                    this.$router.push({path: 'fill', name: '填空题创编', params: {form: this.form}})
                } else if (this.form.questionType == 5) {
                    bus.$emit('changeAsideActiveIndex', "objective")
                    this.$router.push({path: 'objective', name: 'Objective', params: {form: this.form}})
                }

                //$emit( eventName, […args] )发射方法名  方法参数
            },
            handleDelete(index, row) {
                //注意url/{路径}/
                this.request.delete("/question/delete/" + row.questionId).then(res => {
                    console.log(res)
                    if (res.data === true) {
                        this.$message.success("删除成功")
                        this.load()
                    } else {
                        this.$message.error("删除失败")
                    }
                })

            },
            handleSizeChange(pageSize) { //改变当前每页的个数触发
                this.pageSize = pageSize
                console.log(pageSize)
                this.load()
            },
            handleCurrentChange(pageNum) {  //改变当前页码触发
                this.pageNum = pageNum
                this.load()
            },
            exp() {
                window.open(`http://${serverIp}:9090/question/export`)
            },
            handleExcelImportSuccess() {
                this.$message.success("导入成功")
                this.load()
            },
            handleExcelImportError() {
                this.$message.success("导入失败")
            }


        }

    }
</script>
